
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>购物车</title>
	<link rel="stylesheet" type="text/css" href="css/cart.css"/>
	<script src="js/frameJS/jquery.1.4.2-min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	
	<header></header>
	
	<div id="gwc-wrapper">
		<div class="gwc" style=" margin:auto;">
			<table cellpadding="0" cellspacing="0" class="gwc_tb1">
				<tr>
					<td class="tb1_td1"><input id="Checkbox1" type="checkbox"  class="allselect"/></td>
					<td class="tb1_td2">全选</td>
					<td class="tb1_td3">商品</td>
					<td class="tb1_td5">数量</td>
					<td class="tb1_td6">单价</td>
					<td class="tb1_td7">操作</td>
				</tr>
			</table>
				   
			<!---商品加减算总数---->
			<script type="text/javascript">
			$(function () {
				
				
				//单价
				var price = 10
				//每项商品的小计
				var t = parseInt($(".text_box").text());
				
				$(".add").click(function () {
					t++;
					$(".text_box").text(t)
					setTotal(); GetCount();
				})
				$(".min").click(function () {
					if(t>1){
						t--;
						$(".text_box").text(t)
						setTotal(); GetCount();
					}else{
						alert("商品最小数量为1")
						t=1;
						$(".text_box").text(t)
						setTotal(); GetCount();
					}
				})
				function setTotal() {
					$(".total1").html(price.toFixed(2));
					$(".newslist-1").val(t * price);
				}
				setTotal();
			})
			</script>
			
			<table cellpadding="0" cellspacing="0" class="gwc_tb2" class="goods-box">
				<tr>
					<td class="tb2_td1"><input type="checkbox" value="1" name="newslist" class="newslist-1" /></td>
					<td class="tb2_td2"><a href="#"><img src="images/52208700.jpg"/></a></td>
					<td class="tb2_td3">
						<a href="#">
							<ul>
								<li>产品标题</li>
								<li>产品描述</li>
							</ul>
						</a>
					</td>
					<td class="tb1_td5">
						<input class="min" name=""  style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="-" />
						<span class="text_box">1</span>
						<input class="add" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="+" />
					</td>
					<td class="tb1_td6"><label class="total1" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;"></label></td>
					<td class="tb1_td7"><a href="#">删除</a></td>
				</tr>
			</table>
			
			
			<!---总数---->
			<script type="text/javascript">
			$(function () {
				$(".quanxun").click(function () {
					setTotal();
					//alert($(lens[0]).text());
				});
				function setTotal() {
					var len = $(".tot");
					var num = 0;
					for (var i = 0; i < len.length; i++) {
						num = parseInt(num) + parseInt($(len[i]).text());
		
					}
					//alert(len.length);
					$("#zong1").text(parseInt(num).toFixed(2));
					$("#shuliang").text(len.length);
				}
				//setTotal();
			})
			</script>
			<table cellpadding="0" cellspacing="0" class="gwc_tb3">
				<tr> 
					<td class="tb3_td2">已选 <label id="shuliang" style="color:#ff5500;font-size:14px; font-weight:bold;">0</label> 件</td>
					<td class="tb3_td3">合计(不含运费):<span style=" color:#ff5500;">￥</span><span style=" color:#ff5500;"><label id="zong1" style="color:#ff5500;font-size:14px; font-weight:bold;"></label></span></td>
					<td class="tb3_td4"><span id="jz1">结算</span><a href="#" style=" display:none;"  class="jz2" id="jz2">结算</a></td>
				</tr>
			</table>
		</div>
	</div>
	
	<footer></footer>
	
	<script type="text/javascript">
	$(document).ready(function () {
		
		//加载公共头部！！！
		$('header').load('common-header2.html');
		$('footer').load('common-footer.html');
		
		//jquery特效制作复选框全选反选取消(无插件)
		// 全选        
		$(".allselect").click(function () {
			
			if($(this).attr("checked")){
				$(".gwc_tb2 input[name=newslist]").each(function () {
					$(this).attr("checked", true);
					// $(this).next().css({ "background-color": "#3366cc", "color": "#ffffff" });
				});
				GetCount();
			
			}
			else
	   		{
				$(".gwc_tb2 input[name=newslist]").each(function () {
					if ($(this).attr("checked")) {
						$(this).attr("checked", false);
						//$(this).next().css({ "background-color": "#ffffff", "color": "#000000" });
					} else {
						$(this).attr("checked", true);
						//$(this).next().css({ "background-color": "#3366cc", "color": "#000000" });
					} 
				});
				GetCount();
	    
	   		}
			
		});
	
		//反选
		$("#invert").click(function () {
			$(".gwc_tb2 input[name=newslist]").each(function () {
				if ($(this).attr("checked")) {
					$(this).attr("checked", false);
					//$(this).next().css({ "background-color": "#ffffff", "color": "#000000" });
				} else {
					$(this).attr("checked", true);
					//$(this).next().css({ "background-color": "#3366cc", "color": "#000000" });
				} 
			});
			GetCount();
		});
	
		//取消
		$("#cancel").click(function () {
			$(".gwc_tb2 input[name=newslist]").each(function () {
				$(this).attr("checked", false);
				// $(this).next().css({ "background-color": "#ffffff", "color": "#000000" });
			});
			GetCount();
		});
	
		// 所有复选(:checkbox)框点击事件
		$(".gwc_tb2 input[name=newslist]").click(function () {
			if ($(this).attr("checked")) {
				//$(this).next().css({ "background-color": "#3366cc", "color": "#ffffff" });
			} else {
				// $(this).next().css({ "background-color": "#ffffff", "color": "#000000" });
			}
		});
	
		// 输出
		$(".gwc_tb2 input[name=newslist]").click(function () {
			// $("#total2").html() = GetCount($(this));
			GetCount();
			//alert(conts);
		});
	});
	//******************
	function GetCount() {
		var conts = 0;
		var aa = 0;
		$(".gwc_tb2 input[name=newslist]").each(function () {
			if ($(this).attr("checked")) {
				for (var i = 0; i < $(this).length; i++) {
					conts += parseInt($(this).val());
					aa += 1;
				}
			}
		});
		$("#shuliang").text(aa);
		$("#zong1").html((conts).toFixed(2));
		$("#jz1").css("display", "none");
		$("#jz2").css("display", "block");
	}
	</script>
</body>
</html>
